<template>
    <div>
        <van-sticky>
            <van-tabs v-model:active="tabActive" background="#b4b4b4" class="tab-aaa">
                <van-tab name="a" title="播放" />
                <van-tab name="b" title="平铺" />
            </van-tabs>
        </van-sticky>
        <div v-show="tabActive == 'a'">
            <div class="rand-img" v-if="showPic">
                <p>{{ showPic.time }}</p>
                <div class="pic-img">
                    <img :style="picWidth" :src="showPic.url" />
                </div>
                <div class="text-ggg">
                    <span>当前缩放:{{ s }}倍</span>
                    <div class="gg-22">数据来源:<van-button size="small" @click="webpopup = true" type="primary">
                            {{ webIndexStr }}</van-button></div>
                </div>
            </div>
            <div @click="popup_show = true" class="time-g">
                <p>开始时间:{{ showTime.start }}</p>
                <p>结束时间:{{ showTime.end }}</p>
            </div>
            <MyCalendar :vdate="[start, end]" :popup_show="popup_show" @close="popup_show = false" @dateRes="dateRes">
            </MyCalendar>
            <div class="slider-div">
                <van-slider bar-height="5" v-model="playIndex" :min="0" :max="list.length - 1" />
            </div>

            <div class="play-btn-g">
                <van-button type="primary" @click="s = s > 1 ? (s - 0.25) : 1" :disabled="s == 1">缩小</van-button>
                <van-button type="primary" @click="s = 1">重置</van-button>
                <van-button type="primary" @click="s = s + 0.25">放大</van-button>
            </div>

            <div class="play-btn-g">
                <van-button type="primary" @click="playIndex--" :disabled="playIndex == 0">上一个</van-button>
                <van-button v-if="!timer" type="primary" @click="play_rand()"
                    :disabled="playIndex >= (list.length - 1)">播放</van-button>
                <van-button v-else type="primary" @click="clearTimer()">暂停</van-button>
                <van-button type="primary" @click="playIndex++" :disabled="playIndex >= (list.length - 1)">下一个</van-button>
            </div>
        </div>
        <div v-show="tabActive == 'b'">
            <div class="pic-img-box" v-for="(item, index) in this.list.slice().reverse()">
                <p class="title-txt"><span class="num">{{ index + 1 }}</span>{{ item.time }}</p>
                <img :style="picWidth" :src="item.url" />
            </div>
        </div>

        <link-botton-group></link-botton-group>
    </div>
</template>
<script setup>
import { generateRadarUrls } from "@/api/weather_radar";
import MyCalendar from "./VantCalendar/VantCalendar.vue";
import { ref, reactive, watch } from 'vue'



const webList = [{ "key": 1, "label": "广东雷达" }, { "key": 2, "label": "广州雷达" }, { "key": 3, "label": "深圳雷达" }, { "key": 4, "label": "阳江雷达" }, { "key": 5, "label": "肇庆雷达" }];

const start = reactive(new Date(new Date().toLocaleDateString()));
const end = reactive(start.setDate(new Date().getDate() - 5));

const webIndex = ref(1);
watch(webIndex, (new_val, old_val) => { initData() });
const timer = reactive(false);
const playIndex = ref(0);
const popup_show = ref(false);

const initData = () => {
    const startTime = new Date(start.getTime() - 240 * 60 * 1000);
    const endTime = new Date(end.getTime() - 50 * 60 * 1000);
    if (timer) {
        clearInterval(timer);
        timer = false;
    }

    let res = generateRadarUrls(startTime, endTime);
    playIndex.value = 0;
    list.value = res;
};



const list = ref(generateRadarUrls(startTime, endTime));



const interval = ref(0.5);


const s = ref(1);

const webpopup = ref(false);
const tabActive = ref("a");

</script>
<style>
.rand-img img {
    width: 100%;
}

.rand-img {
    font-size: 18px;
}

.play-btn-g {
    display: flex;
    justify-content: space-evenly;
    margin-top: 30px;
}

.slider-div {
    padding: 15px 50px;
    margin: 40px 0;
}

.pic-img {
    height: 76vw;
    overflow: auto;

}

.time-g {
    font-size: 18px;
    padding: 0;
    margin: 15px;
    text-align: center;
}

.rand-img p {
    /* padding: 0 20px; */
    text-align: center;
}



.text-ggg {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* line-height: 35px; */
}

.gg-22 {
    display: flex;
    align-items: center;
}

.text-ggg {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* line-height: 35px; */
}

.web-gggg {
    font-size: 30px;
    padding: 30px;
}



.web-gggg .van-radio {
    padding: 10px 0;
    margin: 10px 0;
    border-bottom: 1px solid;
}

.title-txt {
    margin: 0;
    font-size: 18px;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
}

.title-txt .num {
    background: #1989fa;
    color: white;
    margin-right: 5px;
    padding: 3px;
    border-radius: 50%;
    width: 20px;
    display: inline-block;
    height: 20px;
    text-align: center;
    font-size: 12px;
    height: 20px;
}
</style>